<template>
	<!--首页-->
	<yd-flexbox class="home" direction="vertical">
		<!--banner-->
		<div v-if="bannerdata" class="banner">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide" style="width: 100%;" v-for="item, key in bannerdata" :key="key">
						<a ref="imgHref" @click="banner_TZ(item.bannerType,item.houseMasterId,item.imgHref)">
							<img v-if="item.imgUrl.indexOf('?')==-1" :src="item.imgUrl+'?imageslim'" :name="item.title" :alt="item.bannerType" />
							<img v-else :src="item.imgUrl" :name="item.title" :alt="item.bannerType" />
						</a>
					</div>
				</div>
			</div>
		</div>
		<!--搜索框和图标-->
		<div class="sea-icon">
			<div class="sea-bows">
				<div class="search">
					<div class="search-address" @click="address(0)">
						<!--<span v-if="city==500100" class="sadd-text">重庆</span>
						<span v-if="city==510100" class="sadd-text">成都</span>-->
						<span v-for="addsitem,key in addressdata" v-if="city==addsitem.cityid" class="sadd-text">{{addsitem.ShortName}}</span>
						<img class="sadd-down" src="../assets/img/home/search-icon/images/icon-down.png" />
					</div>
					<div class="search-input" @click="search">
						<input type="text" value="搜索目的地" id="search-text" />
					</div>
				</div>
				<div v-if="column" class="icons">
					<ul>
						<li v-for="item, key in column" :key="key" @click="rendruoter(item.houseType)">
							<img v-if="item.imgUrl.indexOf('?')==-1" :src="item.imgUrl+'?imageslim'">
							<img v-else :src="item.imgUrl">
							<p>{{item.title}}</p>

						</li>
					</ul>
				</div>
			</div>
		</div>

		<!--精选专场-->
		<!--导航-->
		<div v-if="specialdata" class="content-nav">
			<div class="content-nav-left">
				<img src="../assets/img/images/nav-icon_11.png" />
				<p>精选专场</p>
			</div>
			<div class="content-nav-right"></div>
		</div>
		<!--内容-->
		<div class="special-content">
			<ul>
				<li v-for="item,key in specialdata" :key="key">
					<a @click="banner_TZ(item.bannerType,item.houseMasterId,item.imgHref)">
						<img v-if="item.imgUrl.indexOf('?')==-1" :src="item.imgUrl+'?imageslim'" :title="item.title" />
						<img v-else :src="item.imgUrl" :title="item.title" />
					</a>
				</li>
			</ul>

		</div>
		<!--广告-->
		<div v-if="ad" v-for="item,key in ad" :key="key" class="adv">
			<a :href="item.imgHref" :title="item.title">
				<img v-if="item.imgUrl.indexOf('?')==-1" :src="item.imgUrl+'?imageslim'" />
				<img v-else :src="item.imgUrl" />
			</a>
		</div>

		<!--日租-->
		<!--导航-->
		<div v-if="getshortHouseListdata" class="content-nav">
			<div class="content-nav-left">
				<img src="../assets/img/images/nav-icon_11.png" />
				<p>日租</p>
			</div>
			<div class="content-nav-right" @click="short_list(getshortHouseListdata.houseType)">查看更多<img src="../assets/img/dataimg/images/more_09.png"></div>
		</div>
		<!--日租内容-->
		<div  class="content-swiper">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-if="getshortHouseListdata!=false" v-for="item,key in getshortHouseListdata.houseList" :key="key" @click="detailsrouter(item.houseId)">
						<div class="router-link">
							<div class="swiper-img">
								<img v-if="item.house_img.indexOf('?')==-1" :src="item.house_img+'?imageslim'" />
								<img v-else :src="item.house_img" />
								<div class="sh-price">￥<span>{{item.prices}}</span>/晚</div>
							</div>
							<p class="swiper-text">{{item.title}}</p>
							<div class="swiper-item">
								<span v-if="item.houseRent==1">{{houseRent}} </span>
								<span v-if="item.roomRent==1">{{roomRent}} </span>
								<span v-if="item.bedRental==1">{{bedRental}} </span>
								<span>{{item.room}}室{{item.hall}}厅{{item.toilet}}卫</span>
								<span>宜居{{item.personNumber}}人</span>
								<span>{{item.centiare}}m²</span>
							</div>
							<div class="swiper-item-red">
								<!--<span>{{item.tags.replace(/,/g, " | ")}}</span>-->
								<span v-for="tagsitem,key in item.tags.split(',').slice(0,3) " :key="key" v-if="tagsitem!=''">{{tagsitem}}</span>

							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<!--长租-->
		<!--导航-->
		<div v-if="getlongHouseListdata" class="content-nav">
			<div class="content-nav-left">
				<img src="../assets/img/images/nav-icon_11.png" />
				<p>长租</p>
			</div>
			<div class="content-nav-right" @click="long_list(getlongHouseListdata.houseType)">查看更多<img src="../assets/img/dataimg/images/more_09.png"></div>
		</div>
		<!--日租内容-->
		
		<div class="content-swiper">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div v-if="getlongHouseListdata!=false" class="swiper-slide" v-for="item,key in getlongHouseListdata.houseList" :key="key" @click="longdetailsrouter(item.houseId)">
						<div class="router-link">
							<div class="swiper-img">
								<img v-if="item.house_img.indexOf('?')==-1" :src="item.house_img+'?imageslim'" />
								<img v-else :src="item.house_img" />
								<div class="sh-price">￥<span>{{item.prices}}</span>/月</div>
							</div>
							<p class="swiper-text">{{item.title}}</p>
							<div class="swiper-item">
								<span v-if="item.longJoinRent==1">合租 </span>
								<span v-if="item.longHouseRent==1">整租</span>
								<span>{{item.room}}室{{item.hall}}厅{{item.toilet}}卫</span>
								<span>{{item.centiare}}m²</span>
							</div>
							<div class="swiper-item-red">
								<span v-for="tagsitem,key in item.tags.split(',').slice(0,3) " :key="key" v-if="tagsitem!=''">{{tagsitem}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</yd-flexbox>
</template>

<script>
	import api from '../fetch/api'
	import Swiper from "../assets/libs/swiper.min.js";
	import { mapGetters, mapActions } from 'vuex'
	export default {
		name: 'index',
		data() {
			return {
				city: "",
				//				分类数据
				//				日租数据
				//				城市id判断
				isaddcity: sessionStorage.getItem("isaddcity"),
			}
		},
		computed: {
			...mapGetters([
				'bannerdata',
				'column',
				'specialdata',
				'ad',
				'source',
				'version',
				'addressdata',
				'lunbostatus',
				'getshortHouseListdata',
				'getlongHouseListdata',
				'houseRent',
				'roomRent',
				'bedRental',
			])

		},
		mounted() {
			var that = this;
			document.body.style.overflow = "visible";
			document.querySelector("html").style.overflow = "visible";
			that.cityrouter();
			//			接口加载调用
			that.getHomedata(that.city);
			that.getshortHouseList(that.city);
			that.getCityInfo();
			//			that.getlongHouseList(that.city);
			//			城市id判断
		},
		methods: {
			...mapActions({
				getHomeInfo: 'getHomeInfo',
				getCityInfo: 'getCityInfo',
				getRecommendInfo: 'getRecommendInfo',
				setOpenApp:'setOpenApp'
			}),
			//				城市数据
			banner_TZ(bannerType, houseMasterId, imgHref) {
				var that = this;
				if(bannerType == 1) {
					var userinfo=JSON.parse(sessionStorage.getItem("userinfo"));
					that.setOpenApp(imgHref+"?userId="+userinfo.id+"&source="+that.source+"&token="+userinfo.token+"&version="+that.version+"&score=0")
				}
				if(bannerType == 4) {
					that.$router.push({
						path: '/longhouseMaster',
						query: {
							houseMasterId: houseMasterId,
							cityId: that.cityId
						}
					})
				}

			},
			//			搜索
			search() {
				var that = this;
				that.$router.push({
					path: "/search",
					query: {
						cityId: that.city,
						city: true
					}
				})
			},
			//			地址选择
			address(pageid) {
				var that = this;
				that.$router.push({
					name: "Myaddress",
					params: {
						pageid: pageid
					}
				})
			},
			//			日租跳转
			short_list(houseType) {
				var that = this;
				that.$router.push({
					path: '/shortList',
					query: {
						houseType: houseType.toString(),
						cityId: that.city
					}
				})

			},
			//			长租跳转
			long_list(houseType) {
				var that = this;
				that.$router.push({
					path: '/longList',
					query: {
						houseType: houseType.toString(),
						cityId: that.city
					}
				})
			},
			//			分类路由跳转
			rendruoter(router_houseType) {
				var that = this;
				//				sessionStorage.setItem("router_houseType",router_houseType);
				if(router_houseType == 1) {
					that.$router.push({
						path: '/longrent',
						query: {
							router_houseType: router_houseType,
							cityId: that.city
						}
					})
				}
				if(router_houseType == 2) {

					that.$router.push({
						path: '/shortrent',
						query: {
							router_houseType: router_houseType.toString(),
							cityId: that.city
						}
					})
				}
				if(router_houseType == 0) {
					that.setOpenApp(" https://m.zhudd.com/h5/recruit.html")
				}
			},
			//			详情路由跳转
			detailsrouter(houseId) {
				var that = this;
				that.$router.push({
					path: '/shortDetails',
					query: {
						houseId: houseId
					}
				})
			},
			longdetailsrouter(houseId) {
				var that = this;
				that.$router.push({
					path: '/longDetails',
					query: {
						houseId: houseId
					}
				})
			},
			lunbo() {
				var swiper = new Swiper('.swiper-container', {
					slidesPerView: 'auto',
					spaceBetween: 10,
					pagination: {
						el: '.swiper-pagination',
						clickable: true,
					},
				});
			},
			//			城市判断
			cityrouter() {
				var that = this;
				//				address传一个值来判断首页的城市id:isaddcity
				if(that.isaddcity != "true") {
					sessionStorage.setItem("cityId", 500100);
				}
				var sesscityID = sessionStorage.getItem("cityId");
				if(sesscityID != null) {
					that.city = sesscityID;
				}

			},
			//				首页接口
			getHomedata(cityid) {
				var that = this;
				var ajaxSign = {
					"cityId": cityid,
					"source": that.source,
					"version": that.version
				};
				let ajaxData = api.getAES(ajaxSign);
				that.getHomeInfo(ajaxData)

			},
			//			日租
			getshortHouseList(cityid) {
				//				城市判断
				var that = this;
				var ajaxSign = {
					"source": that.source,
					"cityId": cityid,
				};

				let ajaxData = api.getAES(ajaxSign);
				api.GetAecommend(ajaxData)
				.then(res => {
					let ajaxdata = res.result;

					that.getRecommendInfo(ajaxdata)
					that.$nextTick(function() {
						that.lunbo();
					})
				})

			},

		}
	}
</script>

<style scoped>
	@import url("../assets/css/swiper.min.css");
	.yd-flexbox {
		background: #FFFFFF;
		padding-bottom: 0.25rem;
	}
	/*banner*/
	
	.home .banner img {
		display: block;
		width: 100%;
		height: 5rem;
	}
	/*搜索框和图标*/
	
	.home .sea-icon {
		width: 100%;
		background: #FFFFFF;
		padding: 0 .24rem;
		box-sizing: border-box;
	}
	
	.home .sea-bows {
		box-shadow: 1px 1px 1px #e4e4e4;
	}
	
	.home .search {
		z-index: 99;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		position: relative;
		width: 6.3rem;
		top: -.37rem;
		left: 50%;
		height: .74rem;
		transform: translateX(-50%);
		background: #FFFFFF;
		border: .02rem solid #e5e5e5;
		box-sizing: border-box;
		border-radius: 30px;
		overflow: hidden;
	}
	
	.home .search-address {
		display: -webkit-flex;
		align-items: center;
		text-align: right;
		padding-left: 0.25rem;
	}
	
	.home .search-address span {
		color: #282828;
		font-family: "黑体";
		font-size: .31rem;
	}
	
	.home .search-address img {
		width: .22rem;
		height: .12rem;
		margin: 0 .1rem;
	}
	
	.home .search-input {
		height: .5rem;
		position: relative;
	}
	
	.home .search-input::after {
		content: "";
		display: block;
		width: 1px;
		height: 90%;
		background: #a5a5a5;
		position: absolute;
		top: 50%;
		left: 2px;
		transform: translateY(-50%);
	}
	
	.home .search-input>input {
		/*width: 6.30rem;*/
		height: 100%;
		padding-left: .9rem;
		background: url(../assets/img/home/search-icon/images/search_03.png) no-repeat;
		background-size: .33rem;
		background-position: .35rem 50%;
		box-sizing: border-box;
	}
	
	.home .swiper-container {
		width: 100%;
		height: 100%;
	}
	
	.home .swiper-slide {
		text-align: center;
		font-size: 18px;
		background: #fff;
		width: 80%;
		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
	
	.home .swiper-slide {
		width: 90%;
	}
	
	input {
		border: hidden;
	}
	
	#search-text {
		font-size: .24rem;
		color: #a4a4a4;
	}
	/*图标*/
	
	.home .icons {
		width: 100%;
		position: relative;
	}
	
	.home .icons>ul {
		display: -webkit-flex;
		justify-content: space-around;
		background: #FFFFFF;
		padding-bottom: .24rem;
		box-sizing: border-box;
	}
	
	.home .icons li {
		font-size: .31rem;
		text-align: center;
	}
	
	.home .icons img {
		display: block;
		margin: auto;
		width: .89rem;
	}
	
	.home .icons p {
		display: block;
	}
	
	.home .icons a {
		font-size: .34rem;
	}
	/*精选专场*/
	
	.home .content-nav {
		display: -webkit-flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: .42rem .24rem;
		box-sizing: border-box;
	}
	
	.home .content-nav-left {
		display: -webkit-flex;
		align-items: center;
	}
	
	.home .content-nav-left>img {
		width: 0.04rem;
		height: 0.21rem;
		margin-top: 0.1rem;
		margin-right: .21rem;
	}
	
	.home .content-nav-left p {
		font-family: "黑体";
		font-size: .42rem;
		color: #000000;
	}
	
	.home .content-nav-right {
		display: -webkit-flex;
		justify-content: space-between;
		align-items: center;
		font-family: "黑体";
		font-size: .28rem;
		color: #7d7d7d;
	}
	
	.home .content-nav-right img {
		width: .13rem;
		margin-left: .24rem;
	}
	/*精选专场内容*/
	
	.home .special-content {
		width: 100%;
		padding: 0 .24rem;
		box-sizing: border-box;
	}
	
	.home .special-content ul {
		width: 100%;
		display: -webkit-flex;
		-webkit-flex-wrap: wrap;
		box-sizing: border-box;
	}
	
	.home .special-content li {
		width: 50%;
		overflow: hidden;
		margin-bottom: .16rem;
	}
	
	.home .special-content li:nth-of-type(odd) {
		padding-right: .12rem;
		box-sizing: border-box;
	}
	
	.home .special-content li:nth-of-type(even) {
		padding-left: .12rem;
		box-sizing: border-box;
	}
	
	.home .special-content li a {
		display: block;
		width: 100%;
		height: 2.08rem;
	}
	
	.home .special-content li img {
		display: block;
		/*height: 2.8rem;*/
		max-width: 100%;
		min-width: 100%;
		min-height: 100%;
	}
	/*广告*/
	
	.home .adv {
		width: 100%;
		max-height: 1.4rem;
		padding-top: .1rem;
		box-sizing: border-box;
	}
	
	.home .adv img {
		width: 100%;
		height: 100%;
	}
	/*日租*/
	
	.home .content-swiper {
		width: 100%;
		padding-left: .24rem;
		padding-right: .24rem;
		box-sizing: border-box;
		overflow-x: hidden;
	}
	
	.home .router-link {
		width: 100%;
	}
	
	.home .swiper-text {
		width: 100%;
		font-family: "黑体";
		font-size: .333rem;
		text-align: left;
		margin-bottom: .15rem;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.home .swiper-item {
		font-family: "黑体";
		font-size: .26rem;
		display: -webkit-flex;
		box-sizing: border-box;
	}
	
	.home .swiper-item-red {
		display: -webkit-flex;
		color: #e25051;
		font-size: .23rem;
		margin-top: .15rem;
		box-sizing: border-box;
	}
	
	.home .swiper-item span,
	.home .swiper-item-red span {
		position: relative;
		padding: 0 .12rem;
		box-sizing: border-box;
		display: block;
	}
	
	.home .swiper-item span::after {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		width: 1px;
		height: 70%;
		background: #282828;
	}
	
	.home .swiper-item-red span::after {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		width: 1px;
		height: 75%;
		background: #E25051;
	}
	
	.home .swiper-item span:last-child::after,
	.home .swiper-item-red span:last-child::after {
		display: none;
	}
	
	.home .swiper-item span:first-child,
	.home .swiper-item-red span:first-child {
		padding-left: 0;
	}
	
	.home .swiper-img {
		margin-bottom: .24rem;
		box-sizing: border-box;
		position: relative;
		height: 4.17rem;
		overflow: hidden;
	}
	
	.home .swiper-img>img {
		max-width: 100%;
		min-width: 100%;
		min-height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: block;
	}
	
	.home .sh-price {
		position: absolute;
		bottom: .17rem;
		left: 0;
		color: #fff;
		background: rgba(0, 0, 0, 0.5);
		padding: .2rem .21rem;
		box-sizing: border-box;
		font-size: .23rem;
	}
	
	.home .sh-price span {
		font-size: .35rem;
	}
</style>